<template>
  <div >
    <el-dialog
      v-model="dialogVisibles"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      width="50%"
      draggable
    >
      <template #header>
        <div class="customerTitle2">创建订单</div>
      </template>
      <div class="queryDiv">
        <div class="queryDiv1 queryDiv2" @click="openPath(1)">
         <div>
           <img style="width: 40px; height: 40px" src="http://dc-app-oss.oss-cn-zhangjiakou.aliyuncs.com/dms/dms_order/order1.png"  alt="标准销售订单">
         </div>
        <div>
          标准销售订单
        </div>
        </div>
        <div class="queryDiv1 queryDiv3" @click="openPath(2)">
          <div>
            <img style="width: 40px; height: 40px" src="http://dc-app-oss.oss-cn-zhangjiakou.aliyuncs.com/dms/dms_order/order3.png"  alt="寄售订单">
          </div>
          <div>
            寄售订单
          </div>
        </div>
        <div class="queryDiv1 queryDiv4" @click="openPath(3)">
          <div>
            <img style="width: 40px; height: 40px"  src="http://dc-app-oss.oss-cn-zhangjiakou.aliyuncs.com/dms/dms_order/order2.png"  alt="快速下单">
          </div>
          <div>
            样品下单
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">

import router from "/@/router";

defineOptions({
    name: 'OrderSelect',
  })
const dialogVisibles = ref<boolean>(false)
const imageTitle = (va:any)=>{
  if(va == 1){
    return '标准销售订单'
  }else if(va == 2){
    return '寄售订单'
  }if(va == 3){
    return '样品下单'
  }
}
const openPath = (va:number)=>{
  //用于跳转页面

  if(va == 1){
    router.push('/order/addOrder?path=3')
    localStorage.setItem('orderPath','0')
    dialogVisibles.value = false
  }else if(va == 2){
    router.push('/order/addOrder?path=4')
    localStorage.setItem('orderPath','0')
    dialogVisibles.value = false
  }else if(va == 3){
    router.push('/order/quickOrder')
    localStorage.setItem('orderPath1','0')
    dialogVisibles.value = false
  }
}
//抛出数据
defineExpose({
  dialogVisibles,
})
</script>

<style lang="scss" scoped>
@import "../index";
.buttonOrder{
  display: block;
  width: 100%;
  margin-bottom: 10px;
  margin-left: 0;
}
.queryDiv{
  display: flex;
  justify-content: space-around;

}
.queryDiv1{
  flex: 1;
  display: flex;
  align-items: center;
  height: 100px;
  justify-content: center;
  font-weight: 600;
  margin-right: 5px ;
flex-direction: column;
  cursor: pointer;
}
.queryDiv2{
  border: 1px solid #42a5f5;
  background-color: #bbdefb;
}
.queryDiv3{
  border: 1px solid #81c784;
  background-color: #c8e6c9;
}
.queryDiv4{
  border: 1px solid #fff176;
  background-color: #fff9c4;
}
</style>
